﻿<template>
  <div>
    <Form-Layout :data="settings" :pageControl.sync="pageControl" :commonConfig="settings.pageConfig" :pageModel.sync="pageModel" :otherModel.sync="otherMdoel" :parentModel="parentModel" :parentControl.sync="parentControl"></Form-Layout>
    <el-dialog v-drag class="popInner" :title = 'popInnerPage.titleName' :visible.sync = 'popInnerPage.show' :width = "popInnerPage.settings && popInnerPage.settings.pageConfig ? (popInnerPage.settings.pageConfig.width + '%') : '45%'"
    @close = "closeDialog" :close-on-click-modal = 'false' :close-on-press-escape = 'false' append-to-body>
      <ShowDynamicForm :settings="popInnerPage.settings" :parentModel="popInnerPage.parentModel" :parentControl.sync="pageControl"></ShowDynamicForm>
    </el-dialog>
    <el-dialog v-drag class="popOuter" :visible.sync = 'pageControl.showOutPop' width = "50%">
      <iframe :src="pageControl.outPopUrl"></iframe>
    </el-dialog>
    <WS-Trigger :wsConsoleDialog = 'wsDialogInfo.visible' :wsTitle = 'wsDialogInfo.title' :wsApiRouter = 'wsDialogInfo.wsApiRouter'
    @wsConsoleDialogClosed = 'wsDialogInfo.visible = false'></WS-Trigger>
  </div>
</template>

<script>
// 主体内容展示的区域
import FormLayout from './ShowFormLayout.vue'
// ws事件相关的操作部分
import WSTrigger from '@/components/WebSocketComponents/WebSocketConsole.vue'
export default {
  props: ['settings', 'parentModel', 'parentControl'],
  name: 'ShowDynamicForm',
  data () {
    return {
      pageModel: {},
      otherMdoel: {},
      wsDialogInfo: {
        visible: false,
        title: '',
        wsApiRouter: ''
      },
      popInnerPage: {
        show: false,
        titleName: '',
        pageUid: '',
        settings: {
          list: [],
          pageConfig: {}
        },
        parentModel: {}
      },
      pageControl: {
        showInnerPop: false,
        innerPageUid: '',
        innerRowData: {},
        showOutPop: false,
        outPopUrl: '',
        refreshPage: false,
        reset: false,
        showWS: false,
        wsApiRouter: '',
        wsTitle: ''
      }
    }
  },
  mounted () {
  },
  methods: {
    closeDialog () {
      this.pageControl.showInnerPop = false
    },
    getDataObjFromPageModel () {
      let rtn = {}
      let keys = Object.keys(this.pageModel)
      for (let i = 0; i < keys.length; i++) {
        rtn[keys[i]] = this.pageModel[keys[i]].value
      }
      return rtn
    }
  },
  watch: {
    'pageControl.showInnerPop': {
      handler: function (val, oldVal) {
        if (val) {
          if (this.pageControl.innerPageUid) {
            this.popInnerPage.pageUid = this.pageControl.innerPageUid
            this.$api.query('/d_form/' + this.popInnerPage.pageUid).then(data => {
              this.popInnerPage.titleName = data.name
              this.$set(this.popInnerPage, 'settings', JSON.parse(data.settings))
              // 有行数据时，行数据就是parentModel
              this.$set(this.popInnerPage, 'parentModel', this.pageControl.innerRowData ? this.pageControl.innerRowData : this.getDataObjFromPageModel())
              this.popInnerPage.show = true
            })
          }
        } else {
          this.popInnerPage.pageUid = ''
          this.popInnerPage.settings = {}
          this.popInnerPage.parentModel = {}
          this.popInnerPage.show = false
        }
      },
      deep: true
    },
    'pageControl.refreshPage': {
      handler: function (val, oldVal) {
        if (val) {
          this.pageControl.refreshPage = false
          // location.reload()
          this.$forceUpdate()
        }
      }
    },
    'pageControl.showWS': {
      handler: function (val, oldVal) {
        if (val) {
          if (this.pageControl.wsApiRouter) {
            this.wsDialogInfo.title = this.pageControl.wsTitle
            this.wsDialogInfo.wsApiRouter = this.pageControl.wsApiRouter
            this.wsDialogInfo.visible = true
          } else {
            this.$message.error('WS请求缺少API参数')
          }
        }
      }
    },
    'wsDialogInfo.visible': {
      handler: function (val, oldVal) {
        if (!val) {
          this.pageControl.showWS = false
          this.pageControl.wsApiRouter = ''
        }
      }
    },
    pageModel: {
      handler: function (val, oldVal) {
        // console.debug(val)
      },
      deep: true
    }
  },
  components: {
    FormLayout,
    WSTrigger
  }
}
</script>
<style lang="scss">
.top-op {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}
.top-op .top-left {
  min-width: 300px;
}
.top-op .top-center {
  width: 90%
}
.popOuter {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}
.popInner {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    width:80%;
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}
</style>
